<template>
	<div class="nav_box">
		<ul>
			<li @click="toPage('home')">
				<span :class="{action: $route.path=='/home'}"></span>
			</li>
			<li @click="toPage('classify')">
				<span :class="{action: $route.path=='/classify'}"></span>
			</li>
			<li @click="toPage('cart')">
				<span :class="{action: $route.path=='/cart'}"></span>
			</li>
			<li @click="toPage('mine')">
				<span :class="{action: $route.path=='/mine'}"></span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				path: '/home',
			};
		},
		watch: {

		},
		components: {},
		beforeRouteEnter(to, from, next) {
			next();
		},
		beforeRouteLeave(to, from, next) {
			next();
		},
		activated() {

		},
		deactivated() {

		},
		computed: {},
		mounted() {},
		methods: {
			toPage(m) {
				switch(m) {
					case 'home':
						this.$router.push({
							name: 'home'
						})
						break;
					case 'classify':
						this.$router.push({
							name: 'classify'
						})
						break;
					case 'cart':
						this.$router.push({
							name: 'cart'
						})
						break;
					case 'mine':
						this.$router.push({
							name: 'mine'
						})
						break;
					default:
						break;
				}
			},
		}
	};
</script>

<style lang='scss' scoped>
	@import '~@/assets/css/mixin';
	.nav_box {
		width: 100%;
		height: rem(90);
		background: #fff;
		border-top: rem(1) solid #eee;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		ul {
			display: flex;
			justify-content: space-between;
			li {
				flex: 1;
				height: rem(90);
				display: flex;
				justify-content: center;
				align-items: center;
				&:nth-child(1) span {
					width: 100%;
					height: 100%;
					background: url(../../assets/images/nav_btn_index_normal@2x.png) no-repeat center center;
					background-size: rem(40);
				}
				&:nth-child(2) span {
					width: 100%;
					height: 100%;
					background: url(../../assets/images/nav_btn_classification_normal@2x.png) no-repeat center center;
					background-size: rem(40);
				}
				&:nth-child(3) span {
					width: 100%;
					height: 100%;
					background: url(../../assets/images/nav_btn_cart_normal@2x.png) no-repeat center center;
					background-size: rem(40);
				}
				&:nth-child(4) span {
					width: 100%;
					height: 100%;
					background: url(../../assets/images/nav_btn_user_normal@2x.png) no-repeat center center;
					background-size: rem(40);
				}
				&:nth-child(1) .action {
					width: 100%;
					height: 100%;
					background: url(../../assets/images/nav_btn_index_highlight@2x.png) no-repeat center center !important;
					background-size: rem(40) !important;
				}
				&:nth-child(2) .action {
					width: 100%;
					height: 100%;
					background: url(../../assets/images/nav_btn_classification_highlight@2x.png) no-repeat center center !important;
					background-size: rem(40) !important;
				}
				&:nth-child(3) .action {
					width: 100%;
					height: 100%;
					background: url(../../assets/images/nav_btn_cart_highlight@2x.png) no-repeat center center !important;
					background-size: rem(40) !important;
				}
				&:nth-child(4) .action {
					width: 100%;
					height: 100%;
					background: url(../../assets/images/nav_btn_user_highlight@2x.png) no-repeat center center !important;
					background-size: rem(40) !important;
				}
			}
		}
	}
</style>